
<%@ page import="com.recipeexchange.RecipeType; com.recipeexchange.domain.Recipe" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="layout" content="main" />
        <g:set var="entityName" value="${message(code: 'recipe.label', default: 'Recipe')}" />
        <title><g:message code="default.create.label" args="[entityName]" /></title>

        <script type="text/javascript" src="${resource(dir: 'wymeditor/wymeditor', file: 'jquery.wymeditor.min.js')}"></script>

        <script type="text/javascript">

            /* Here we replace each element with class 'wymeditor'
             * (typically textareas) by a WYMeditor instance.
             *
             * We could use the 'html' option, to initialize the editor's content.
             * If this option isn't set, the content is retrieved from
             * the element being replaced.
             */
               $(document).ready(function() {
                    $('.wymeditor').wymeditor({

//                        html: '<ul><li>stuff</li></ul>',
                        postInit: function(wym) {
                            jQuery(wym._box).find(wym._options.containersSelector).remove();
                            jQuery(wym._box).find(wym._options.classesSelector).remove();
                            jQuery(wym._box).find(".wym_area_main").css("margin-right", "0px");
                        }
                    });
               });

        </script>

    </head>
    <body>
        <div class="nav">
            <span class="menuButton"><a class="home" href="${createLink(uri: '/')}">Home</a></span>
            <span class="menuButton"><g:link class="list" action="list"><g:message code="default.list.label" args="[entityName]" /></g:link></span>
        </div>
        <div class="body">
            <h1><g:message code="default.create.label" args="[entityName]" /></h1>
            <g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
            </g:if>
            <g:hasErrors bean="${recipeInstance}">
            <div class="errors">
                <g:renderErrors bean="${recipeInstance}" as="list" />
            </div>
            </g:hasErrors>
            <g:form action="save" method="post" >
                <g:hiddenField name="id" value="${recipeInstance?.id}" />
                <g:hiddenField name="locator" value="${recipeInstance?.locator}" />
                <g:hiddenField name="version" value="${recipeInstance?.version}" />

                <div>
                    <bean:field beanName="recipeInstance" property="name"/>
                </div>
                <div>
                    <bean:select  beanName="recipeInstance" property="recipeType" from="${RecipeType.values()}" valueMessagePrefix="com.recipeexhange.recipe.type"/>
                </div>
                <div>
                    <bean:field labelKey="num.people.serves" beanName="recipeInstance" property="serves"/>
                </div>
                <div class="wymeditorDiv">
                    <bean:textArea  beanName="recipeInstance" property="description" default="${'<p>Add a description of recipe</p>'}" class="wymeditor" labelClass="wymeditorLabel"/>
                </div>
                <div class="wymeditorDiv">
                    <bean:textArea beanName="recipeInstance" property="ingredients" default="${'<ul><li>Add ingredients</li></ul>'}" class="wymeditor" labelClass="wymeditorLabel"/>
                </div>
                <div class="wymeditorDiv">
                    <bean:textArea  beanName="recipeInstance" property="recipe" default="${'<ul><li>Add steps</li></ul>'}" class="wymeditor" labelClass="wymeditorLabel"/>
                </div>

                <div class="buttons">
                    <span class="button"><g:submitButton name="create" class="save wymupdate" value="${message(code: 'default.button.create.label', default: 'Create')}" /></span>
                </div>
            </g:form>
        </div>
    </body>
</html>
